<template>
    <fullScreenContainer title="湖南省农业优势特色产业集群信息系统"  type='fullScreenContainer' >
      <template slot="leftContent">
        <Panel key="jdfj" title="基地分级" height="35%">
          <template slot="right">
            <div>
              <button @click="fn('1')">大类1</button>
              <button @click="fn('2')">大类2</button>
            </div>
          </template>
          <XyzTransition appear xyz="fade rotate-right ease-out-back">
            <dv-scroll-ranking-board
              class="triangle"
              v-if="type === '1'"
              :config="config"
              style="width: 100%; height: 80%"
            />
          </XyzTransition>
        </Panel>
        <Panel key="jdfl" title="基地分类" class="flex1" height="35%">
          <div
            class="animate__animated animate__bounceInLeft"
            style="display: flex; justify-content: space-between; height: 15%"
          >
            <div style="display: flex; flex-direction: column">
              <span class="zb">指标名称1</span>
              <CountTo
                class="num"
                :start-val="0"
                :end-val="100"
                :duration="5000"
              ></CountTo>
            </div>
            <div style="display: flex; flex-direction: column">
              <span class="zb">指标名称2</span>
              <CountTo
                class="num"
                :start-val="0"
                :end-val="100"
                :duration="5000"
              ></CountTo>
            </div>
            <div style="display: flex; flex-direction: column">
              <span class="zb">指标名称</span>
              <CountTo
                class="num"
                :start-val="0"
                :end-val="100"
                :duration="5000"
              ></CountTo>
            </div>
          </div>
          <div style="height: 85%">
            <EchartsDemo style="height: 85%"></EchartsDemo>
          </div>
        </Panel>
        <Panel key="jdyyms" title="基地运营模式" class="flex1" height="30%">
          <EchartsDemo style="height: 90%"></EchartsDemo>
        </Panel>
      </template>
      <template slot="rightContent">
        <Panel key="cgmj" title="场馆面积" class="flex1" height="35%">
          <EchartsDemo :chartData="[]" :initChart="line" style="height: 85%;"></EchartsDemo>
        </Panel>
        <Panel key="xjnrfx" title="宣教内容分析" class="flex1" height="30%">
          <dv-scroll-board
            v-mouseenter="handleMouseEnterTrack"
            style="height: 85%"
            :config="dataVconfig2"
          />
        </Panel>
        <Panel
          key="rsfx"
          title="近一年接待群众人数分析"
          class="flex1"
          height="35%"
        >

          <EchartsDemo :chartData="[]" :initChart="bar" style="height: 90%"></EchartsDemo>
        </Panel>
      </template>
      <template slot="fullScreenMap">
        <div class="map-page-container">
          <!-- <Map ref="Map"></Map> -->
        </div>
      </template>
      <template slot="centerContent">
        <map-tools></map-tools>
      </template>
    </fullScreenContainer>
  </template>
  <script>
  import CountTo from "vue-count-to";
  import Map from '@/Iframe/kcgis3x.vue'
  import MapTools from '@/layout/components/Center/index.vue'
  import EchartsDemo from '@/echartsDemo/index.vue'
  import tinycolor from 'tinycolor2'
  import line from './line/initChart'
  import bar from './barChart'
  export default {
    components: {
      CountTo,Map,MapTools,EchartsDemo
    },
    directives: {
      mouseenter: {
        bind(el, binding, vnode) {
          el.addEventListener("mouseenter", binding.value);
        },
        unbind(el, binding, vnode) {
          el.removeEventListener("mouseenter", binding.value);
        },
      },
    },
    data() {
      return {
        zoom: 15,
        dataVconfig2:{
        header: ["网格员名称", "联系方式", "离岗时间", "离角色置说明"],
        headerBGC:tinycolor('#1FE79A').setAlpha(1).toString(),
        data: [
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
          ['<span style="color:#37a2da;">行1列1</span>', 2, 3, 4],
        ],
        oddRowBGC: "transparent",
        evenRowBGC: "transparent",
        waitTime:5000,
        rowNum: 5,
      },
        data3: [
          {
            name: "data1",
            value: [200, 3000, 20000, 35000, 50000, 18000],
          },
          {
            name: "data2",
            value: [5000, 14000, 28000, 26000, 42000, 21000],
          },
        ],
        mapStyle: "amap://styles/blue",
        center: [121.5273285, 31.21515044],
        circles: [
          {
            center: [121.5273285, 31.21515044],
            radius: 200,
            fillOpacity: 0.5,
            events: {
              click: () => {
                alert("click");
              },
            },
          },
        ],
        config: {
          data: [
            {
              name: "周口",
              value: 55,
            },
            {
              name: "南阳",
              value: 120,
            },
            {
              name: "西峡",
              value: 78,
            },
            {
              name: "驻马店",
              value: 66,
            },
            {
              name: "新乡",
              value: 80,
            },
            {
              name: "信阳",
              value: 45,
            },
            {
              name: "漯河",
              value: 29,
            },
          ],
          awaitTime:5000
        },
        type: "1",
      };
    },
    methods: {
      changeData2() {},
      initCallback(option, chart) {},
      setUpdate(chart) {},
      fn(type) {
        this.type = type;
      },
      handleMouseEnterTrack(e){
        console.log(e,'sss')
      },
      line,bar
    },
    mounted() {},
  };
  </script>
  <style scoped lang="scss">
  .num,.zb {
    color: #fff;
  }
  </style>
